<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/layui.css"/>
    <link rel="stylesheet" href="font/iconfont.css"/>
    <link rel="stylesheet" href="css/common.css"/>
    <script src="js/jquery-2.1.4.js"></script>
    <script src="js/layui.js"></script>
</head>
<body>
<nav class="index_nav w">
    <img src="image/user_info_03.png" alt=""/>
    <div class="index_hello">你好，米花</div>
    <div class="index_memberNum">会员号：16607</div>
</nav>
<header class="index_header">
    <div class="w">
        <div class="index_logo">
            <img src="image/logo.png" alt=""/>
            <img src="image/logo_info.png" alt=""/>
        </div>
        <div class="index_navigation">
            <ul>
                <li><a href="">数据库首页</a></li>
                <li class="active"><a href="">会员首页</a></li>
                <li><a href="">个人中心</a></li>
                <li><a href="">网站消息(<span style="color: red">1</span>)</a></li>
                <li><a href="">退出</a></li>
            </ul>
        </div>
    </div>
</header>
<section class="index_content">
    <div class="w">
        <div class="index_content_left">
            <ul class="layui-nav layui-nav-tree layui-inline" lay-filter="demo" style="margin-right: 10px;padding: 20px 0;">
                <li class="layui-nav-item">
                    <a href=""><img src="image/1.png" alt=""/>犬籍注册 <span style="color: #999999;font-size: 15px;margin-left: 10px">快速注册犬籍</span></a>
                    <!--<dl class="layui-nav-child">-->
                        <!--<dd><a href="javascript:;">选项一</a></dd>-->
                        <!--<dd><a href="javascript:;">选项二</a></dd>-->
                        <!--<dd><a href="javascript:;">选项三</a></dd>-->
                        <!--<dd><a href="">跳转项</a></dd>-->
                    <!--</dl>-->
                </li>
                <li class="layui-nav-item ">
                    <a href="javascript:;"><img src="image/2.png" alt=""/>血统申请<span class="iconfont icon-youjiantou"></span></a>
                    <dl class="layui-nav-child">
                        <dd><a href="">配种申请</a></dd>
                        <dd><a href="">血统申请</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href=""><img src="image/3.png" alt=""/>犬只变更</a></li>
                <li class="layui-nav-item"><a href=""><img src="image/4.png" alt=""/>外籍换发</a></li>
                <li class="layui-nav-item"><a href="javascript:;"><img src="image/5.png" alt=""/>年审<span class="iconfont icon-youjiantou"></span></a>
                    <dl class="layui-nav-child">
                        <dd><a href="">xxx</a></dd>
                        <dd><a href="">xxx</a></dd>
                    </dl>
                </li>
                <span class="layui-nav-bar" style="top: 22.5px; height: 0px; opacity: 0;"></span></ul>
        </div>
        <div class="index-content_right">
            <div class="person_info index-content_item">
                <div class="person_img">
                    <img src="image/person_img.png" alt=""/>
                    <div>欢迎您！米花</div>
                </div>
                <div class="person_info_detail" style="border-right: 1px solid #f2f2f2">
                    <div class="person_info_detail_item">
                        <span class="person_info_detail_key">会员编号：</span>
                        <span class="person_info_detail_value">16607</span>
                    </div>
                    <div class="person_info_detail_item">
                        <span class="person_info_detail_key">会员类型：</span>
                        <span class="person_info_detail_value">个人会员</span>
                    </div>
                    <div class="person_info_detail_item">
                        <span class="person_info_detail_key">会员注册时间：</span>
                        <span class="person_info_detail_value">2018年04月03日</span>
                    </div>
                    <div class="person_info_detail_item">
                        <span class="person_info_detail_key">会员到期日：</span>
                        <span class="person_info_detail_value">2018年04月03日 </span>
                        <button class="layui-btn layui-btn-xs layui-btn-danger">续费</button>
                    </div>
                    <div class="person_info_detail_item">
                        <span class="person_info_detail_key">芯片植入员资格：</span>
                        <span class="person_info_detail_value">否 </span>
                        <button class="layui-btn layui-btn-xs">续费</button>
                    </div>

                </div>
                <div class="person_info_detail">
                    <div class="person_info_detail_item">
                        <span class="person_info_detail_key">犬舍名称：</span>
                        <span class="person_info_detail_value">安徽省  合肥市 米花犬舍</span>
                    </div>
                    <div class="person_info_detail_item">
                        <span class="person_info_detail_key">犬舍编号：</span>
                        <span class="person_info_detail_value">16607</span>
                    </div>
                    <div class="person_info_detail_item">
                        <span class="person_info_detail_key">注册犬舍类型 ：</span>
                        <span class="person_info_detail_value">2星级犬舍</span>
                    </div>
                    <div class="person_info_detail_item">
                        <span class="person_info_detail_key">注册犬舍时间：</span>
                        <span class="person_info_detail_value">2018年04月03日</span>
                    </div>
                    <div class="person_info_detail_item">
                        <span class="person_info_detail_key">注册犬舍到期日：</span>
                        <span class="person_info_detail_value">2018年04月03日 </span>
                        <button class="layui-btn layui-btn-xs layui-btn-danger">续费</button>
                    </div>
                </div>
            </div>
            <div class="dog_info index-content_item">
                <div class="index_content_item_title">
                    <div style="font-size: 22px">犬只信息</div>
                    <div class="index_content_search" style="display: flex;width: 356px;">
                        <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入芯片号" class="layui-input" style="height: 35px;">
                        <div class="search_ab"><img src="image/search_1_03.png" alt=""/></div>
                        <button class="layui-btn" style="margin-left: 10px;height: 35px;width: 116px;">搜索</button>
                    </div>
                </div>
                <table class="layui-table" lay-even="" lay-skin="row">
                    <colgroup>
                        <col width="150">
                        <col width="150">
                        <col width="200">
                        <col>
                    </colgroup>
                    <thead>
                    <tr>
                        <th>芯片号</th>
                        <th>犬名</th>
                        <th>发证时间</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>134444XXXXX </td>
                        <td>保罗 </td>
                        <td>2018年04月03日</td>
                    </tr>
                    <tr>
                        <td>134444XXXXX </td>
                        <td>保罗 </td>
                        <td>2018年04月03日</td>
                    </tr>
                    <tr>
                        <td>134444XXXXX </td>
                        <td>保罗 </td>
                        <td>2018年04月03日</td>
                    </tr>

                    </tbody>
                </table>
            </div>
            <div class="dog_info index-content_item index_service">
                <div class="index_content_item_title ">
                    <div style="font-size: 22px">业务订单</div>
                </div>
                <table class="layui-table" lay-even="" lay-skin="row">
                    <colgroup>
                        <col width="150">
                        <col width="150">
                        <col width="200">
                        <col>
                    </colgroup>
                    <thead>
                    <tr>
                        <th>创建时间</th>
                        <th>流水号</th>
                        <th>状态</th>
                        <th>详情</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>2018年04月03日 </td>
                        <td> 3445667777 </td>
                        <td>已交费</td>
                        <td style="color: #00aa98;">详情</td>
                    </tr>
                    <tr>
                        <td>2018年04月03日 </td>
                        <td> 3445667777 </td>
                        <td>已交费</td>
                        <td style="color: #00aa98;">详情</td>
                    </tr>
                    <tr>
                        <td>2018年04月03日 </td>
                        <td> 3445667777 </td>
                        <td>已交费</td>
                        <td style="color: #00aa98;">详情</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</section>
<footer class="inex_footer">
    <div>版权所有：中国工作犬管理协会　苏ICP备05081624号</div>
    <div>地址： 南京市雨花台区小行路18号　邮编：210012　电话： (025)025-52881386　传真：(025)52403303 </div>
    <div>网站保留所有权利，未经允许不得复制、镜像 </div>
</footer>
</body>
<script>
    layui.use('element', function(){
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

        //监听导航点击
        element.on('nav(demo)', function(elem){
            //console.log(elem)

        });
    });
</script>
</html>